<!--导出按钮-->
<template>
  <div class="export-container">
    <el-button plain style="width: inherit;" type="success" @click="init">导出表格</el-button>
  </div>
</template>

<script>
import xlsx from "xlsx";

export default {
  props: ["xlsxName", "sheetList", "sheetHeader"],
  data () {
    return {};
  },
  methods: {
    init () {
      console.log("正在生成表格");
      console.log(`this.sheetName-->`, this.sheetHeader);
      console.log(`this.sheetList-->`, this.sheetList);
      const aoa = [
        this.sheetHeader,
        ...this.sheetList,
      ];

      const sheet = xlsx.utils.aoa_to_sheet(aoa);
      this.openDownloadDialog(this.sheet2blob(sheet), this.xlsxName + ".xlsx");
    },
    openDownloadDialog (url, saveName) {
      if (typeof url === "object" && url instanceof Blob) {
        url = URL.createObjectURL(url); // 创建blob地址
      }
      const aLink = document.createElement("a");
      aLink.href = url;
      aLink.download = saveName || ""; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
      let event = null;
      if (window.MouseEvent) {
        event = new MouseEvent("click");
      } else {
        event = document.createEvent("MouseEvents");
        event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      }
      aLink.dispatchEvent(event);
    },
    sheet2blob (sheet, sheetName) {
      sheetName = sheetName || "sheet1";
      const workbook = {
        SheetNames: [sheetName],
        Sheets: {},
      };
      workbook.Sheets[sheetName] = sheet;
      // 生成excel的配置项
      const wopts = {
        bookType: "xlsx", // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        type: "binary",
      };
      const wbout = xlsx.write(workbook, wopts);

      // 字符串转ArrayBuffer
      function s2ab (s) {
        const buf = new ArrayBuffer(s.length);
        const view = new Uint8Array(buf);
        for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
      }

      return new Blob([s2ab(wbout)], { type: "application/octet-stream" });
    },
  },
};
</script>

<style lang="less" scoped>
.export-container {
  display: inline-block;
}
</style>
